<template>
  <div class="fx" style="flex-direction: column; height: 100%; width: 100%">
    <el-row class="content-head" style="width: 100%" v-if="HeadShow">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle v-show="navTitleShow"></HeadTitle>
          &nbsp
        </el-col>
        <el-col :span="12" class="tr fx head-right-box">
          <div class="fx head-right-icon" v-if="isCollection" @click="toCollection">
            <p><i class="fa fa-qrcode"></i>&nbsp;&nbsp;收款码</p>
          </div>
          <div class="fx head-right-icon" v-if="isHaveExport" @click="toExport">
            <p><i class="el-icon-upload"></i>&nbsp;&nbsp;导出全部数据</p>
          </div>
          <div class="fx head-right-icon" v-if="isHaveAdd">
            <p @click="toAdd">
              <i :class="addIcon"></i>
              &nbsp;&nbsp;{{ addText }}
            </p>
          </div>
          <slot name="headRight"></slot>
        </el-col>
      </el-col>
    </el-row>
    <el-row class="fx_3" style="overflow-x: hidden; overflow-y: auto; width: 100%">
      <div style="height: 20px; width: 100%"></div>
      <el-row class="content-search" v-if="isShow">
        <el-row>
          <slot name="search">
            <searchComponents :searchData="searchData" ref="search" @sendUserSearch="getUserSearch" v-if="isShow" :toUp="toUp" :down="down"> </searchComponents>
          </slot>
          <slot name="searchBottom"></slot>
        </el-row>
      </el-row>

      <el-row>
        <el-col :span="24" class="pd_20">
          <div class="table-content">
            <slot name="table"></slot>
            <el-row v-if="isShowBottom">
              <el-col :span="24" class="table_bottom" style="display: flex">
                <el-col :span="10" class="tl">
                  <slot name="footerLeft"></slot>
                </el-col>
                <el-col :span="14" class="tr" v-if="isHavePagination">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pagination.currentPage"
                    :page-sizes="[5, 10, 20, 50, 100]"
                    background
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                  ></el-pagination>
                </el-col>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-row>

    <el-dialog title="收款码" :visible.sync="dia_show" width="300px" :modal="true" :lock-scroll="true">
      <div>
        <canvas id="QRCode"></canvas>
        <!-- <img src="./../../../../../assets/img/kf1.jpg" alt="" /> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import searchComponents from "../viewsModel/search-components/search-components";
import QRCode from "qrcode";
export default {
  components: {
    HeadTitle,
    searchComponents,
  },
  props: {
    navTitleShow: {
      type: Boolean,
      default: true,
    },
    HeadShow: {
      type: Boolean,
      default: true,
    },
    exportUrl: [String],
    pagination: {
      // 分页数据
      type: Object,
      default: () => {},
    },
    toUp: [String], // 会员列表数据
    down: [String], // 会员列表数据
    isShow: {
      //是否显示搜索
      type: Boolean,
      default: true,
    },
    searchData: {
      // 搜索的数据
      type: Function,
      default: () => {},
    },
    isHavePagination: {
      //是否有分页
      type: Boolean,
      default: true,
    },
    isHaveExport: {
      //是否有导出
      type: Boolean,
      default: true,
    },
    isHaveAdd: {
      //是否有添加
      type: Boolean,
      default: true,
    },
    addText: {
      type: String,
      default: "添加",
    },
    addIcon: {
      type: String,
      default: "el-icon-plus",
    },
    isShowBottom: {
      //是否显示底部
      type: Boolean,
      default: true,
    },
    isCollection: {
      //是否显示收款码
      type: Boolean,
      default: false,
    },
    orderStatus: [String], // 订单列表数据
  },
  data() {
    return {
      dia_show: false,
      iframeurl: "",
    };
  },

  methods: {
    clearSearch() {
      this.$refs.search.clearSearch();
    },
    toCollection() {
      this.dia_show = true;
      this.$api.getSettings
        .getSettingsList({
          cate: "wx",
        })
        .then((res) => {
          if (res.data.code == 200 && res.data.status == 1) {
            res.data.result.forEach((item) => {
              if (item.title == "手机端网址") {
                this.iframeurl = item.value;
                // console.log("33333333333333:",this.iframeurl)
                this.iframeurl += "/zhanye/receipt/transaction?id=0";
                var msg = document.getElementById("QRCode");
                // 将获取到的数据（val）画到msg（canvas）上
                QRCode.toCanvas(msg, this.iframeurl, function (error) {
                  console.log(error);
                });
              }
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result);
          }
        });
    },
    toExport() {
      if (this.exportUrl) {
        try {
          var params = JSON.parse(JSON.stringify(this.$refs.search.formInline));
          if (this.$route.path.indexOf("supplierorder") >= 0) {
            params.is_supplier = 1;
          }
          if (this.$route.path.indexOf("chain_order") >= 0) {
            params.is_chain = 1;
          }
          if (this.exportUrl == "/api/admin/export/order" && this.orderStatus && this.orderStatus != "所有订单") {
            params.status = this.orderStatus || "";
          }
          this.$fnc.postExcelFile(params, this.exportUrl);
        } catch (err) {
          this.$emit("toExport", this.exportUrl);
        }
      } else {
        this.$fnc.alertError("请检查地址", this.exportUrl);
      }
    },
    getUserSearch(val) {
      this.$emit("sendUserSearch", val);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    toAdd() {
      this.$emit("toAdd");
    },
  },
};
</script>

<style scoped>
.recharge_sum {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
}

.recharge_sum p {
  font-size: 14px;
  line-height: 32px;
  padding-right: 50px;
  text-align: left;
}

.recharge_sum span {
  font-size: 14px;
  font-weight: bold;
}

.head-right-box {
  justify-content: flex-end;
}

#QRCode {
  width: 240px !important;
  height: 240px !important;
  margin: 0 auto;
}
</style>
